<template>
 <div>
   <el-card class="box-card">
     <div slot="header" class="clearfix">
       <el-button style="float: left; " type="primary" @click="DialogVisible = true">新增图片类别</el-button>
     </div>
     <el-table
       :data="typedata"
       style="width: 100%;margin-bottom: 20px;"
       row-key="id"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
       <el-table-column
         prop="create_datetime"
         label="创建时间"

       >
       </el-table-column>
       <el-table-column
         prop="description"
         label="描述"
         sortable
       >
       </el-table-column>
       <el-table-column
         prop="name"
         label="种类"
         sortable
       >
       </el-table-column>
       <el-table-column
         label="操作"
         fixed="right"
       >
         <template slot-scope="scope">
           <el-popconfirm
             title="确定删除吗？"
             @confirm="handleDel(scope)"
           >
             <el-button type="danger" slot="reference" size="mini" >删除</el-button>
           </el-popconfirm>
           <el-button size="mini" style="margin-left: 10px" @click="editimgType(scope)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
   </el-card>
   <el-dialog
     title="新增"
     :visible.sync="DialogVisible"
     width="30%">
     类别
     <el-input v-model="typeinfo.name" placeholder="请输入图片种类名称"></el-input>
     描述
     <el-input v-model="typeinfo.description" placeholder="请输入图片描述"></el-input>
     <span slot="footer" class="dialog-footer">
    <el-button @click="DialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addimgType">确 定</el-button>
  </span>
   </el-dialog>
   <el-dialog
       title="编辑"
       :visible.sync="editDialogVisible"
       width="30%">
       类别
       <el-input v-model="typeinfo.name" placeholder="请输入图片种类名称"></el-input>
       描述
       <el-input v-model="typeinfo.description" placeholder="请输入图片描述"></el-input>
       <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmEditimgType">确 定</el-button>
  </span>
     </el-dialog>
 </div>
</template>

<script>
import { GetList, DelObj, AddObj,UpdateObj } from './api'
export default {
  data () {
    return {
      typedata: [],
      DialogVisible: false,
      editDialogVisible:false,
      typeinfo: {
        name: '',
        description: '',
        id:0
      }

    }
  },
  created () {
    this.getdata()
  },
  methods: {
    async confirmEditimgType(){
      const res =  await UpdateObj(this.typeinfo)
      console.log(res)
      if (res.code === 2000) {
        this.$message.success(res.msg)
        this.editDialogVisible = false
        this.getdata()
      } else {
        this.$message.error(res.msg)
      }
    },
    async editimgType(e){
      this.editDialogVisible = true
      this.typeinfo.id = e.row.id
      this.typeinfo.name = e.row.name
      this.typeinfo.description = e.row.description
    },
    async addimgType () {
      const res = await AddObj(this.typeinfo)
      console.log(res)
      if (res.code === 2000) {
        this.$message.success(res.msg)
        this.DialogVisible = false
        this.getdata()
      } else {
        this.$message.error(res.msg)
      }
    },
    async getdata () {
      const res = await GetList()
      console.log(res)
      if (res.code === 2000) {
        // this.$message.success(res.msg)
        this.typedata = res.data.data
      } else {
        this.$message.error(res.msg)
      }
    },
    async handleDel (e) {
      const res = await DelObj(e.row.id)
      if (res.code === 2000) {
        this.$message.success(res.msg)
        this.getdata()
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}

</script>

<style>

</style>
